<template>
  <div class="top" style="padding: 20px;">
    <el-tabs v-model="activeName" v-loading="loading" type="card">
      <el-tab-pane label="网络信息" name="network">
        <el-card>
          <div slot="header">
            <div style="display: flex;align-items: center;">
              <svg-icon icon-class="network.svg" style="margin-top: 5px;" />
              <span style="margin-left: 10px;">网络信息</span>
            </div>
          </div>
          <el-descriptions direction="vertical" :column="5" border>
            <el-descriptions-item label="1秒内发送数据量">{{ data.network.sent }} bytes</el-descriptions-item>
            <el-descriptions-item label="1秒内接收数据量">{{ data.network.recv }} bytes</el-descriptions-item>
            <el-descriptions-item label="1秒内发送数据包数量">{{ data.network.packetsSent }}</el-descriptions-item>
            <el-descriptions-item label="1秒内接收数据包数量">{{ data.network.packetsRecv }}</el-descriptions-item>
            <el-descriptions-item label="1秒内发送数据包错误数">{{ data.network.outErrors }}</el-descriptions-item>
            <el-descriptions-item label="1秒内接收数据包错误数">{{ data.network.inErrors }}</el-descriptions-item>
            <el-descriptions-item label="1秒内丢包数">{{ data.network.inDrops }}</el-descriptions-item>
            <el-descriptions-item label="上传速率">
              <i class="el-icon-upload2" style="color: #409EFF;margin-right: 3px;" />
              {{ data.network.sentStr }}
            </el-descriptions-item>
            <el-descriptions-item label="下载速率">
              <i class="el-icon-download" style="color: #67C23A;margin-right: 3px;" />
              {{ data.network.recvStr }}
            </el-descriptions-item>
            <el-descriptions-item label="最大传输速率">
              <i class="el-icon-sort" style="color: #F56C6C;margin-right: 3px;" />
              {{ data.network.speedStr }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="内存信息" name="memory">
        <el-card>
          <div slot="header">
            <div style="display: flex;align-items: center;">
              <svg-icon icon-class="memory.svg" style="margin-top: 5px;" />
              <span style="margin-left: 10px;">内存信息</span>
            </div>
          </div>
          <el-descriptions direction="vertical" :column="5" border>
            <el-descriptions-item label="总内存">{{ data.memory.totalStr }}</el-descriptions-item>
            <el-descriptions-item label="可用内存">{{ data.memory.availableStr }}</el-descriptions-item>
            <el-descriptions-item label="已用内存">{{ data.memory.usedStr }}</el-descriptions-item>
            <el-descriptions-item label="单页内存">{{ data.memory.pageSizeStr }}</el-descriptions-item>
            <el-descriptions-item label="内存使用率">{{ data.memory.percent }}%</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="CPU信息" name="cpu">
        <el-card>
          <div slot="header">
            <i class="el-icon-cpu" /><span style="margin-left: 10px;">CPU信息</span>
          </div>
          <el-descriptions direction="vertical" :column="3" border>
            <el-descriptions-item label="CPU名称">{{ data.cpu.name }}</el-descriptions-item>
            <el-descriptions-item label="CPU供应商">{{ data.cpu.vendor }}</el-descriptions-item>
            <el-descriptions-item label="CPU系统架构">{{ data.cpu.microarchitecture }}</el-descriptions-item>
            <el-descriptions-item label="CPU核心数">{{ data.cpu.cpuNum }}</el-descriptions-item>
            <el-descriptions-item label="CPU总使用数">{{ data.cpu.toTal }}</el-descriptions-item>
            <el-descriptions-item label="CPU系统使用率">{{ data.cpu.sys }}%</el-descriptions-item>
            <el-descriptions-item label="CPU用户使用率">{{ data.cpu.user }}%</el-descriptions-item>
            <el-descriptions-item label="CPU当前等待率">{{ data.cpu.wait }}%</el-descriptions-item>
            <el-descriptions-item label="CPU当前空闲率">{{ data.cpu.free }}%</el-descriptions-item>
            <el-descriptions-item label="CPU型号信息" :span="5">{{ data.cpu.cpuModel }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="项目信息" name="project">
        <el-card>
          <div slot="header">
            <i class="el-icon-folder" /><span style="margin-left: 10px;">项目信息</span>
          </div>
          <el-descriptions direction="vertical" :column="5" border>
            <el-descriptions-item label="工作目录" :span="3">{{ data.project.userDir }}</el-descriptions-item>
            <el-descriptions-item label="项目启动时间">{{ data.project.startTime | formatTime }}</el-descriptions-item>
            <el-descriptions-item label="项目运行时长">{{ data.project.runningTimeStr }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="服务器信息" name="os">
        <el-card>
          <div slot="header">
            <i class="el-icon-cloudy" /><span style="margin-left: 10px;">服务器信息</span>
          </div>
          <el-descriptions direction="vertical" :column="5" border>
            <el-descriptions-item label="系统名称">{{ data.os.name }}</el-descriptions-item>
            <el-descriptions-item label="系统内核">{{ data.os.arch }}</el-descriptions-item>
            <el-descriptions-item label="操作系统">{{ data.os.family }}</el-descriptions-item>
            <el-descriptions-item label="厂商">{{ data.os.manufacturer }}</el-descriptions-item>
            <el-descriptions-item label="型号">{{ data.os.model }}</el-descriptions-item>
            <el-descriptions-item label="系统位数">{{ data.os.bitness }}</el-descriptions-item>
            <el-descriptions-item label="系统启动时间">{{ (data.os.systemBootTime * 1000) | formatTime }}</el-descriptions-item>
            <el-descriptions-item label="系统运行时间">{{ data.os.systemUptimeStr }}</el-descriptions-item>
            <el-descriptions-item label="运行进程数">{{ data.os.processCount }}</el-descriptions-item>
            <el-descriptions-item label="运行线程数">{{ data.os.threadCount }}</el-descriptions-item>
            <el-descriptions-item label="版本">{{ data.os.version }}</el-descriptions-item>
            <el-descriptions-item label="版本号">{{ data.os.buildNumber }}</el-descriptions-item>
            <el-descriptions-item label="版本代号">{{ data.os.codeName }}</el-descriptions-item>
            <el-descriptions-item label="全称">{{ data.os.allName }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="JVM虚拟机信息" name="jvm">
        <el-card>
          <div slot="header">
            <div style="display: flex;align-items: center;">
              <svg-icon icon-class="java.svg" style="margin-top: 3px;" />
              <span style="margin-left: 10px;">JVM虚拟机信息</span>
            </div>
          </div>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="JVM名称" :span="2">{{ data.jvm.name }}</el-descriptions-item>
            <el-descriptions-item label="JVM规范名称" :span="2">{{ data.jvm.specName }}</el-descriptions-item>
            <el-descriptions-item label="JVM最大内存">{{ data.jvm.maxMemoryStr }}</el-descriptions-item>
            <el-descriptions-item label="JVM已分配内存">{{ data.jvm.totalMemoryStr }}</el-descriptions-item>
            <el-descriptions-item label="JVM已分配内存中的剩余空间">{{ data.jvm.freeMemoryStr }}</el-descriptions-item>
            <el-descriptions-item label="JVM最大可用内存">{{ data.jvm.usableMemoryStr }}</el-descriptions-item>
            <el-descriptions-item label="JVM已使用内存">{{ data.jvm.usedMemoryStr }}</el-descriptions-item>
            <el-descriptions-item label="JVM内存使用率">{{ data.jvm.percent }}%</el-descriptions-item>
            <el-descriptions-item label="Java版本" :span="2">{{ data.jvm.javaVersion }}</el-descriptions-item>
            <el-descriptions-item label="JDK路径" :span="4">{{ data.jvm.javaHome }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="磁盘信息" name="disk">
        <el-card>
          <div slot="header">
            <i class="el-icon-receiving" /><span style="margin-left: 10px;">磁盘信息</span>
          </div>
          <el-descriptions direction="vertical" :column="6" border>
            <el-descriptions-item label="盘符路径">{{ data.disk.path }}</el-descriptions-item>
            <el-descriptions-item label="磁盘总空间">{{ data.disk.totalSpaceStr }}</el-descriptions-item>
            <el-descriptions-item label="磁盘剩余空间">{{ data.disk.freeSpaceStr }}</el-descriptions-item>
            <el-descriptions-item label="磁盘剩余可用空间">{{ data.disk.usableSpaceStr }}</el-descriptions-item>
            <el-descriptions-item label="磁盘已用空间">{{ data.disk.usedSpaceStr }}</el-descriptions-item>
            <el-descriptions-item label="磁盘占用率">{{ data.disk.percent }}%</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { detail } from '@/api/ops/server'
export default {
  name: 'Server',
  data() {
    return {
      loading: false, // 页面加载loading
      activeName: 'network',
      data: { // 页面数据
        project: {},
        cpu: {},
        disk: {},
        jvm: {},
        memory: {},
        network: {},
        os: {}
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取服务器详情
    getDetail() {
      this.loading = true
      detail().then(res => {
        this.data = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
